<template>
	<view class="user">
		<view class="title">
			<image src="../../static/my_bg.png" mode=""></image>
			<view class="info">
				<view class="flex_v_venter" style="width: 100%;">
					<view class="tx">
						<image :src="info.avatarUrl" mode="" style="width: 100%;height: 100%;border-radius: 50%;"></image>
					</view>
					<view class="name" v-if="info.nickName">
						<view class="f">{{info.nickName}} <text :selectable='true' style="font-size: 22rpx;margin: 0 0 0 20rpx;color: #fff;opacity: .6;">ID:{{contentInfo.shortid}}</text></view>
						<view class="t flex_v_venter">
							<image src="../../static/vip.png" mode=""></image>
							<text>{{contentInfo.rank}}</text>
						</view>
						
					</view>
					<button type="default" style="margin-left: 0;" @tap='login' open-type="getUserInfo" size='mini' v-else>登陆/注册</button>
					<image class="set" src="../../static/set.png" @click="$go('./setting/setting')" mode=""></image>
				</view>
				<view class="message flex_v_venter">
					<view class="item flex_coum_center" @click="$go('/pages/user/my-money')">
						<text class="count">{{contentInfo.cashAmount != undefined ? contentInfo.cashAmount : '----'}}</text>
						<text class="title1">我的余额</text>
					</view>
					<view class="item flex_coum_center" @click="$go('/pages/user/my-points')">
						<text class="count">{{contentInfo.exchangeAmount != undefined ? contentInfo.exchangeAmount : '----'}}</text>
						<text class="title1">我的购物券</text>
					</view>
					<view class="item flex_coum_center" @click="$go('./my-fans')">
						<text class="count">{{contentInfo.childCount != undefined ? contentInfo.childCount : '----'}}</text>
						<text class="title1">我的粉丝</text>
					</view>
				</view>
			</view>
		</view>
		<view class="my-ordere">
			<view class="row1">
				<text class="order">我的订单</text>
				<view class="row1-right" @click="$go('./order/order')">
					<text class="allOrder">查看全部订单</text>
					<uni-icons type="arrowright" size="12"></uni-icons>
				</view>
			</view>
			<view class="row2" >
				<view class="noPay" @click="$go('./order/order?index=1')">
					<image src="../../static/dfk.png" mode=""></image>
					<text class="txt">待付款</text>
				</view>
				<view class="noPay" @click="$go('./order/order?index=2')" >
					<image src="../../static/dfh.png" mode=""></image>
					<text class="txt">待发货</text>
				</view>
				<view class="noPay" @click="$go('./order/order?index=3')">
					<image src="../../static/dsh.png" mode=""></image>
					<text class="txt">待收货</text>
				</view>
				<view class="noPay" @click="$go('./order/order?index=4')">
					<image src="../../static/ywc.png" mode=""></image>
					<text class="txt">已完成</text>
				</view>
			</view>
		</view>
		<view class="my-rights">
			<view class="row1"><text>我的权益</text></view>
			<view class="row2">
				<view class="row2-item" @click="$go('/pages/user/my-team')">
					<image src="../../static/pt.png" mode=""></image>
					<text>我的拼团</text>
				</view>
				<view class="row2-item" @click="$go('./my-team1')">
					<image src="../../static/zt.png" mode=""></image>
					<text>我的组团</text>
				</view>
				<view class="row2-item" @click="$go('/pages/user/setting/phone')">
					<image src="../../static/phone.png" mode=""></image>
					<text>绑定手机</text>
				</view>
				<view class="row2-item" @click="$go('/pages/user/setting/setting-password')">
					<image src="../../static/pay.png" mode=""></image>
					<text>支付密码</text>
				</view>
				<view class="row2-item" @click="$go('/pages/user/bankmamage/bankMnage')">
					<image src="../../static/bank.png" mode=""></image>
					<text>银行卡</text>
				</view>
				<view class="row2-item" @click="$go('/pages/user/fundManage/payment')">
					<image src="../../static/zz.png" mode=""></image>
					<text>余额转账</text>
				</view>
				<view class="row2-item" @click="$go('/pages/user/fundManage/withdraw')">
					<image src="../../static/tx.png" mode=""></image>
					<text>申请提现</text>
				</view>
				<!-- <view class="row2-item" @click="$go('/pages/user/my-proIn')">
					<image src="../../static/rz.png" mode=""></image>
					<text>入驻申请</text>
				</view> -->
				<view class="row2-item" @click="$go('./share')">
					<!-- <button style="position: absolute;opacity: 0;top: 0;left: 0;width: 100%;height: 100%;z-index: 999;background: #ccc;" type="default" open-type="share"></button> -->
					<image src="../../static/tg.png" mode=""></image>
					<text>推广分享</text>
				</view>
				<view class="row2-item" @click="$go('./address/address')">
					<image src="../../static/dz.png" mode=""></image>
					<text>地址管理</text>
				</view>
				<view class="row2-item" @click="$go('./aboutUs')">
					<image src="../../static/gywm.png" mode=""></image>
					<text>关于我们</text>
				</view>
				<view class="row2-item" @click="$go('/pages/user/my-service')">
					<image src="../../static/kf.png" mode=""></image>
					<text>售后服务</text>
				</view>
				<view class="row2-item" >
					<!-- <image src="../../static/rz.png" mode=""></image>
					<text>入驻申请</text> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			info:JSON.parse(this.$store.state.userInfo),
			contentInfo:JSON.parse(this.$store.state.contentInfo),
			isTap:false
		};
	},
	methods:{
		getContent(){
			this.$ajax('api/Member/Query').then(res => {
				this.contentInfo = res.Data
				this.$store.commit('CHANGE_CONTENTINFO',JSON.stringify(res.Data))
			})
		},
		isSetpassword(){
			this.$ajax('api/Member/QueryIsStatus').then(res => {
				// console.log(res)
				// this.isStatus = res.Data.isStatus
				this.$store.commit('changeStatus', res.Data.isStatus)
			})
		},
		login(){
			let that = this
			if(this.isTap){
				return
			}
			this.isTap = true
			setTimeout(()=>{
				this.isTap = false
			},30000)
			wx.login({
				success:(res)=>{
					// console.log(res)
					// return
					if(res.code){
						this.$ajax('api/Auth/Login',{code:res.code,shortid:uni.getStorageSync('fromOpenid') ? uni.getStorageSync('fromOpenid') : ''}).then(coderes => {
							that.$store.commit('CHANGE_OPENID',coderes.Data.shortid)
							console.log(this.$store.state.openId)
							uni.showModal({
								title: '温馨提示',
								content: '授权微信登录后才能正常使用小程序功能',
								success(res) {
									if (res.confirm) {
										uni.getUserProfile({
											desc: '获取你的昵称、头像、地区及性别',
											success: cur => {
												that.$ajax('api/Member/UpdateWechatInfo',{
													nickName:cur.userInfo.nickName,
													avatarUrl:cur.userInfo.avatarUrl,
													gender:cur.userInfo.gender,
												}).then(res => {
													that.info = cur.userInfo
													that.$store.commit('CHANGE_INFO',JSON.stringify(cur.userInfo))
													that.getContent()
													that.isSetpassword()
												})
												 
											},
											fail: res => {
												//拒绝授权
												uni.showToast({
													title: '您拒绝了请求,不能正常使用小程序',
													icon: 'error',
													duration: 2000
												});
												return;
											}
										});
									} else if (res.cancel) {
										uni.showToast({
											title: '您拒绝了请求,不能正常使用小程序',
											icon: 'error',
											duration: 2000
										});
										that.isTap = false
										return;
									}
								}
							})
						})
					}else{
						uni.showToast({
							title:'系统错误，请重新进去小程序',
							icon:'none'
						})
					}
				}
			})
		}
	},
	onLoad() {
		console.log(this.$store.state.openId)
	},
	onShow() {
		if(this.$store.state.openId){
			// console.log(this.$store.state)
			this.getContent()
		}else{
			uni.showToast({
				title:'请先登陆',
				icon:'none'
			})
		}
	},
	
};
</script>

<style lang="scss">
.user {
	background-color: #f4f4f4;
	width: 100vw;
	height: 100vh;
	position: relative;
}
.title {
	width: 750rpx;
	height: 435rpx;
	position: relative;
	& > image {
		width: 100%;
		height: 435rpx;
		z-index: -1;
	}
	.info {
		position: absolute;
		top: 10rpx;
		width: 100%;
		left: 0;
		padding: 30rpx;
		.tx {
			width: 100rpx;
			height: 100rpx;
			background: #ccc;
			border-radius: 50%;
			margin: 0 20rpx 0 0;
		}
		.name {
			flex: 1;
			.f {
				font-size: 28rpx;
				letter-spacing: 1px;
				color: #fff;
				font-weight: bold;
				margin: 0 0 10rpx;
			}
			.t {
				font-size: 25rpx;
				color: rgb(164, 176, 219);
				letter-spacing: 1px;
				& > image {
					width: 25rpx !important;
					height: 25rpx !important;
					z-index: 1 !important;
					margin: 0 10rpx 0 0;
				}
			}
		}
		.set {
			width: 33rpx;
			height: 33rpx;
			align-self: flex-start;
			margin: 10rpx 0 0;
		}
	}
	.message{
		display: flex;
		margin: 20rpx;
		.item{
			flex: 1;
			height: 120rpx;
			.count{
				color: #fff;
				font-size: 28rpx;
			}
			.title1{
				font-size: 25rpx;
				color: rgb(164, 176, 219);
				margin: 10rpx 0 0;
			}
		}
	}
}

.my-ordere {
	position: absolute;
	top: 307rpx;
	width: 690rpx;
	height: 230rpx;
	background-color: #ffffff;
	margin-left: 29rpx;
	border-radius: 26rpx;
	.row1 {
		display: flex;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 19rpx;
		padding-top: 30rpx;
		.order {
			font-size: 30rpx;
			color: #333333;
		}
		.row1-right {
			.allOrder {
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
	.row2 {
		margin-top: 41rpx;
		display: flex;
		justify-content: space-around;
		image {
			width: 47rpx;
			height: 48rpx;
		}
		.noPay {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.txt {
				margin-top: 28rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
}

.my-rights {
	width: 691rpx;
	border-radius: 26rpx;
	background-color: #ffffff;
	position: absolute;
	top: 560rpx;
	left: 32rpx;
	.row1 {
		margin-left: 30rpx;
		margin-top: 30rpx;
		font-size: 30rpx;
		color: #333;
	}
	.row2 {
		margin-top: 45rpx;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		.row2-item {
			flex: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			image {
				width: 40rpx;
				height: 40rpx;
			}
			text {
				font-size: 24rpx;
				color: #999;
				margin-top: 25rpx;
				margin-bottom: 60rpx;
			}
		}
	}
}
</style>
